import * as echarts from 'echarts';
import mapJson from '../utils/福州市.json';
export default {
    map(id, res) {
        console.log(res)
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        var geoJson = mapJson;
        myChart.showLoading();
        myChart.hideLoading();
        echarts.registerMap('SM', geoJson);
        var data = [
            { name: '鼓楼区', value: 0 },
            { name: '台江区', value: 0 },
            { name: '仓山区', value: 0 },
            { name: '马尾区', value: 0 },
            { name: '晋安区', value: 0 },
            { name: '长乐区', value: 0 },
            { name: '闽侯县', value: 0 },
            { name: '连江县', value: 0 },
            { name: '罗源县', value: 0 },
            { name: '闽清县', value: 0 },
            { name: '永泰县', value: 0 },
            { name: '平潭县', value: 0 },
            { name: '福清市', value: 0 },
        ];
        // echarts.registerMap('SM', geoJson);
        // var data = [
        //     { name: '梅列区', value: 0 },
        //     { name: '三元区', value: 0 },
        //     { name: '明溪县', value: 0 },
        //     { name: '清流县', value: 0 },
        //     { name: '宁化县', value: 0 },
        //     { name: '大田县', value: 0 },
        //     { name: '尤溪县', value: 0 },
        //     { name: '沙县', value: 0 },
        //     { name: '将乐县', value: 0 },
        //     { name: '泰宁县', value: 0 },
        //     { name: '建宁县', value: 0 },
        //     { name: '永安市', value: 0 }
        // ];

        for (let index = 0; index < res.length; index++) {
            const element = res[index];
            data.push({ "name": element.name, "value": element.value });
        }
        myChart.setOption(option = {
            title: {
                // text: '泊位分布情况',
            },
            tooltip: {
                trigger: 'item',
                // formatter: '{b}<br/>{c} (p / km2)'
                formatter: function(params) {
                    if (!params.value) {
                        params.value = '';
                    } else {
                        params.value = params.value + "%";
                    }
                    return params.name + params.value;
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
            },
            visualMap: {
                min: 0,
                max: 100,
                text: ['拥挤', '空闲'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['#7ea4e0', '#6597e3', '#4a88e7', '#377de9', '#2472e8', '#1267ea']
                },
                //图列字体颜色
                textStyle: {
                    color: '#fff'
                }

            },
            series: [{
                name: ' ',
                type: 'map',
                mapType: 'SM', // 自定义扩展图表类型
                label: {
                    show: true,
                    color: 'white',
                    formatter: function(params) {
                        if (!params.value) {
                            params.value = '';
                        } else {
                            params.value = params.value + "%";
                        }
                        return params.name + params.value;
                    }
                },
                data: data,
                //     [
                //     { name: '梅列区', value: 0 },
                //     { name: '三元区', value: 1 },
                //     { name: '明溪县', value: 2 },
                //     { name: '清流县', value: 3 },
                //     { name: '宁化县', value: 0 },
                //     { name: '大田县', value: 1 },
                //     { name: '尤溪县', value: 2 },
                //     { name: '沙县', value: 2 },
                //     { name: '将乐县', value: 2 },
                //     { name: '泰宁县', value: 0 },
                //     { name: '建宁县', value: 0 },
                //     { name: '永安市', value: 0 }
                // ],
                //方大比例
                zoom: 1.23,
                itemStyle: {
                    normal: {
                        borderWidth: 2, //边际线大小
                        borderColor: '#110cf7', //边界线颜色
                        // areaColor: '#fff', //默认区域颜色
                    },
                    emphasis: {
                        show: true,
                        areaColor: '#3066ba', //鼠标滑过区域颜色
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },

                }
            }]
        });
        option && myChart.setOption(option);
    }
    // }

}
